<template>
  <div class="goods" id="goods" name="goods">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>社区</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 分类标签 -->
    <div class="nav">
      <div class="product-nav">
        <div class="title">分类</div>
        <el-tabs v-model="tab" type="card">
          <el-tab-pane
              v-for="item in tabList"
              :key="item.id"
              :label="item.name"
              :name="''+item.id"
          />
        </el-tabs>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main">
      <div class="list">
        <div v-if="clubArticleList.length > 0">
          <el-row>
            <el-col :span="19">
              <MyClubArticleList :list="clubArticleList"></MyClubArticleList>
            </el-col>
            <el-col :span="5">
              <!-- 发布帖子 -->
              <div class="div-post">
                <el-button style="background-color: #f25807; width: 100%; font-size: 20px; color: white" round @click="dialogVisible = true">
                  发布帖子
                </el-button>
              </div>

              <div class="my-business-card">
                <p class="nickname" style="font-family: 华文行楷; font-size: 30px">
                  我的游戏
                </p>
                <!-- 分隔线 -->
                <el-divider></el-divider>
                <div class="div-fans">
                  <el-row>
                    <el-col :span="12">
                      <p style="text-align: center">10</p>
                      <p style="text-align: center">粉丝</p>
                    </el-col>
                    <el-col :span="12">
                      <p style="text-align: center">10</p>
                      <p style="text-align: center">关注</p>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!-- 热帖 -->
              <div class="div-hotArticle">
                <el-card>
                  <div slot="header" class="clearfix">
                    <span style="font-family: 华文行楷; font-size: 30px">社区热门</span>
                  </div>
                  <div v-for="(item, index) in hotArticleList" :key="item.id">
                    <div style="margin-top: 10px">
                      <el-row :gutter="20">
                        <el-col :span="2">
                          <el-tag v-if="index == 0" type="danger" size="small">{{ index + 1 }}</el-tag>
                          <el-tag v-if="index == 1" size="small">{{ index + 1 }}</el-tag>
                          <el-tag v-if="index == 2" type="success" size="small">{{ index + 1 }}</el-tag>
                          <el-tag v-if="index > 2" type="info" size="small">{{ index + 1 }}</el-tag>
                        </el-col>
                        <el-col :span="22">
                          <router-link target="_blank" :to="{ path: '/club/details', query: {id:item.id} }">
                            <span style="font-size: 15px">{{ item.articleTitle }}</span>
                          </router-link>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-else class="none-product">
          抱歉没有找到相关的帖子信息，试试其他条件
        </div>

        <el-dialog title="发布帖子" :visible.sync="dialogVisible" width="1000px">
          <PublishPost></PublishPost>
        </el-dialog>

      </div>
      <!-- 分页 -->
      <el-pagination
          background
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center;"
          layout="total, prev, pager, next, jumper"
          @current-change=""
      />
      <!-- 分页END -->
    </div>
    <!-- 主要内容区END -->
  </div>
</template>

<script>
import article from "@/api/club/article";

export default {
  name: "Community",
  data() {
    return {
      tabList: [
        {
          id: 1,
          name: '最新帖子'
        },
        {
          id: 2,
          name: '推荐帖子'
        }
      ],
      tab: '1',
      clubArticleList: "",  //社区文章了列表
      hotArticleList: [],
      dialogVisible: false,
      page: 1,
      limit: 10,
      total: 0,
    }
  },

  activated() {
    this.getArticleByTab()

    this.getHotArticle()
  },

  methods: {
    getArticleByTab() {
      this.$axios
          .get('/gmmallclub/clubarticle/list', {
            params: {
              page: this.page
            }
          })
          .then(res => {
            const data = res.data.data
            this.clubArticleList = data.list;
            this.total = data.totalCount
          })
          .catch(err => {
            return Promise.reject(err);
          });
    },

    getHotArticle() {
      article.getHotArticleInfo()
          .then(result => {
            this.hotArticleList = result.data
          })
    },

  }
}
</script>

<style scoped>
.goods {
  background-color: #f5f5f5;
}

/* 面包屑CSS */
.el-tabs--card .el-tabs__header {
  border-bottom: none;
}

.goods .breadcrumb {
  height: 50px;
  background-color: white;
}

.goods .breadcrumb .el-breadcrumb {
  width: 1225px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
}

/* 面包屑CSS END */

/* 分类标签CSS */
.goods .nav {
  background-color: white;
}

.goods .nav .product-nav {
  width: 1225px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
}

.nav .product-nav .title {
  width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}

/* 分类标签CSS END */

/* 主要内容区CSS */
.goods .main {
  margin: 0 auto;
  max-width: 1225px;
}

.goods .main .list {
  /*width: 1000px;*/
  min-height: 650px;
  padding-top: 14.5px;
  margin-left: -13.7px;
  overflow: auto;
}

.goods .main .pagination {
  height: 50px;
  text-align: center;
  margin-bottom: 10px;
}

.goods .main .none-product {
  color: #333;
  margin-left: 13.7px;
}

/* 主要内容区CSS END */

.div-post {
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 5px;
  text-align: center;
}

/* 我的名片 */
.my-business-card {
  margin-top: 20px;
  margin-left: 10px;
  background-color: white;
  border-radius: 5px;
  height: 150px;
}

.div-hotArticle {
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 5px;
}

.nickname {
  padding-top: 15px;
  margin-left: 15px;
}

.div-fans {
  margin-top: 5px;
}
</style>